<template>
  <div class="main">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <Reply :userdata="userItem" ref="reply" @transfer='handerReply'></Reply>
    <div class="detail">
      <div class="left-box">
        <div class="main-header">
          <div class="video-title">
            {{ videoInfo.video_title }}
          </div>
          <div class="video-information">
            <span
              ><i class="iconfont icon-shipin1"></i
              >{{ videoInfo.video_play_num }}</span
            ><span
              ><i class="iconfont icon-shizhong"></i
              >{{ videoInfo.video_time }}</span
            ><span
              ><i
                class="iconfont icon-lianxi2hebing_jinzhi"
                style="color: #fd676f"
              ></i
              >未经作者授权，禁止转载</span
            >
          </div>
        </div>
        <div>
          <VideoItem
            :Videodata="{
              video_path: videoInfo.video_url,
              video_pic: videoInfo.video_cover,
            }"
          ></VideoItem>
        </div>

        <!-- <div class="videoitem"></div> -->
        <div class="row-data">
          <div class="video-info">
            <span class="video-info-text">
              {{
                videoInfo.video_content === ""
                  ? "暂无介绍"
                  : videoInfo.video_content
              }}</span
            >
          </div>
          <div class="data-text">
            <span :class="isfab.fab_state ? 'active-text' : ''">
              <i
                class="iconfont icon-dianzan1"
                @click="handerFab(videoInfo.video_id)"
              ></i
              >{{
                videoInfo.video_up_num > 10000
                  ? videoInfo.video_up_num_str
                  : videoInfo.video_up_num
              }}
            </span>
            <span :class="iscollect.col_state ? 'active-text' : ''"
              ><i
                class="iconfont icon-shoucang2"
                @click="handerCollect(videoInfo.video_id)"
              ></i
              >{{
                videoInfo.video_col_num > 10000
                  ? videoInfo.video_col_num_str
                  : videoInfo.video_col_num
              }}</span
            >
            <span @click="handerCopy(videoInfo.video_id, videoInfo.uid)"
              ><i class="iconfont icon-zhuanfa"></i></span
            >
          </div>
        </div>
        <div class="user-data">
          <div class="user-data-info">
            <div class="user-left">
              <div class="user-data-avatar">
                <img :src="videoInfo.avatar" alt="" />
              </div>
              <div class="user-data-text">
                <div class="user-text-username">
                  <span>{{ videoInfo.username }}</span>
                </div>
                <div class="user-text-introduce">
                  <span class="user-text-fans"
                    >{{ videoInfo.fans_str }}粉丝</span
                  >
                  •
                  <div class="user-text-lable">{{ videoInfo.lable }}</div>
                </div>
              </div>
            </div>
            <div class="user-right">
              <button
                class="right-follow"
                @click.stop="handelFollow(videoInfo.uid)"
                v-if="!isfollow.state"
              >
                <i class="iconfont icon-jiahao"></i><span>关注</span>
              </button>
              <button
                class="right-followed"
                v-else

              >
                <i class="iconfont icon-jiahao"></i><span>已关注</span>
              </button>
              <!-- @click="removeFollow(isfollow.fid)" -->
            </div>
          </div>
        </div>

        <!-- 广告 -->
        <div class="advertise-box" v-if="advertise">
          <div class="advertise-text-area" @click="handerAdvNum(advData.adv_id)">
            <a class="inside-text" target="_blank" style="color:#333"
              :href="advData.adv_herf">
              <span class="bolder">{{advData.adv_title}}</span>
            </a>
            <a class="ad-tips" target="_blank" style="color:#333"
              :href="advData.adv_herf">
              <span>
                {{advData.adv_summary}}
              </span>
            </a>
          </div>
          <div class="link-area" @click="handerAdvNum(advData.adv_id)">
            <a
              target="_blank"
              :href="advData.adv_herf"
              :title="advData.adv_title"
              class="inside-bg"
            >
              <img :src="advData.adv_cover" alt="" />
            </a>
          </div>
          <div class="ad" @click="closead">
            <span>广告<i class="iconfont icon-guanbi"></i></span>
          </div>
        </div>

        <div class="detail-tab">
          <div class="tab-header">
            <div class="tab-controlle">
              <div class="tab-discuss">
                <span>评论</span
                ><span class="discuss-num">{{
                  videoInfo.video_comment_total > 10000
                    ? videoInfo.video_comment_total__str
                    : videoInfo.video_comment_total
                }}</span>
              </div>
              <div class="discuss-sort">
                <span
                  :class="showState ? 'herader-active' : ''"
                  @click="handerState()"
                  >最新</span
                >
                |
                <span
                  :class="showState ? '' : 'herader-active'"
                  @click="handerState()"
                  >最热</span
                >
              </div>
            </div>
          </div>
          <div class="make-comments">
            <div class="comment-user-img">
              <img :src="user.avatar" alt="" />
            </div>

            <div class="comment-textarea">
              <form>
                <div class="textarea-box">
                  <textarea
                    rows="4"
                    class="comment-box-textarea"
                    v-focus
                    placeholder="发一条友善的评论"
                    v-model="ArticleCommentText"
                  ></textarea>
                </div>
              </form>
            </div>
            <div class="comment-send">
              <div
                class="comment-send-text"
                @click="subTvComment(videoInfo.video_id)"
              >
                <button ref="commentButtn">发布</button>
              </div>
            </div>
          </div>
          <div class="make-comments-emoj">
            <div class="bt-left">
              <span class="EmotionButton" @click="OpenEmotions()">
                <i class="iconfont icon-biaoqing IconfontSize"></i>
              </span>
              <Emo ref="EmotionB" @AppendInputValue="AppendMessageText" />
            </div>
          </div>
          <div class="hot-comments">
            <div class="root-items">
              <div class="comment-items" v-for="(item,index) in commentlist" :key="item.video_pid" >
                <div class="root-user-comment">
                  <div class="comment-user-box">
                    <div class="comment-user-img">
                      <img :src="item.avatar" alt="" />
                    </div>
                  </div>
                  <div class="comment-area-box">
                    <div class="my-comment">
                      <div class="user-info">
                      <div class="user-name">{{ item.username }}</div>
                      <i></i>
                    </div>
                    <div class="comment-text">
                      <span
                        class="comment-text-info"
                        v-html="$utils.parsingEmoji(item.video_content)"
                      ></span>
                      <div class="comment-info">
                        <span class="comment-time">{{
                          item.video_create_time
                        }}</span>
                        <span class="comment-like">
                          <i :class="item.one_fab_state==1?'iconfont icon-dianzan1':'iconfont icon-dianzan'"
                          :style="item.one_fab_state==1?'color:#f60':''"
                           @click="handerFabOne(item.video_pid,index)"></i>
                          <span class="like-data">{{
                            item.video_fab_num !== 0 ? item.video_fab_num : ""
                          }}</span>
                        </span>

                        <span class="comment-btn" v-if="item.uid!==user.uid" @click="showPopUp(item.uid,item.username,item.video_pid,index)">回复</span>
                      </div>
                    </div>
                    </div>

                  </div>
                </div>
                   <!-- 回复评论 -->
            <div class="reply-comment-box">
              <div class="reply-comment-list" v-if="item.replyState">
              <div class="reply-item" v-for="(reply,i) in item.replyList" :key="reply">
                <div class="reply-user-comment">

                  <div class="reply-area">
                    <div class="comment-text" style="display:flex">
                       <div class="reply-user-avatar " style="width: 24px;height: 24px;  overflow: hidden;border-radius: 50%; margin-right: 8px;">
                      <img :src="reply.avatar" alt="" style="width: 100%;height: 100%;display: block;">
                    </div>
                    <!-- 回复内容 -->
                      <span class="user-name">{{reply.user_name}}</span>                           <!-- 显示谁回复谁-->
                      <span class="un-user-nmae" style="margin:0 3px" v-if="item.username!==reply.un_user_name"> 回复 <span>@{{reply.un_user_name}}</span></span> :
                      <span class="info" v-html="$utils.parsingEmoji(reply.rep_content)"></span>
                    </div>
                    <div class="comment-info">
                      <span class="time">{{reply.rep_create_time}}</span>
                      <span class="like">
                         <i :class="reply.reply_fab_state==1? 'iconfont icon-dianzan1':'iconfont icon-dianzan'"
                         :style="reply.reply_fab_state==1? 'color:#f60':''"
                         @click="handerFabTwo(item.video_pid,reply.rep_id,i,index)"></i>
                         <span class="like-data">{{reply.rep_fab_num>0?reply.rep_fab_num:'' }}</span>
                         <!-- 回复 评论回复 -->
                         <!-- @click="showPopUp(reply.user_id,reply.user_name,reply.rep_id)" -->          <!-- 回复功能-->
                         <span style=" margin-left: 20px;" v-if="reply.user_id!==user.uid"  @click="showPopUp(reply.user_id,reply.user_name,item.video_pid,index)" >回复</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>

              </div>
                  <!-- 展开回复内容 -->
              <div class="reply-all" v-if="+item.video_reply_count!==0">
                <!-- 展示有多少条回复 -->
                <span  @click="handerMoreReply(index)" v-if="!item.replyState">展开{{item.video_reply_count}}条回复</span>
                <!-- 显示更多回复，当总回复评论数等于当前展示回复数量隐藏，否在一值存在 -->
                <span  @click="handerMoreReply(index)" v-if="item.replyState && commentlist[index].replyList.length!==item.video_reply_count">查看更多回复</span>
                 <!-- ，当总回复评论数等于当前展示回复数量 ，，显示给用户提示没有更多回复-->
                <span   v-if="item.replyState && commentlist[index].replyList.length===item.video_reply_count">没有更多回复了</span>
                <span v-if="item.replyState" @click="item.replyState=false">收起</span>
                </div>

            </div>

              </div>

            </div>
              <div class="LoadingBox">
            <Loading noMoreText='没有更多内容了~去其他页面看看吧' :loadShow="loadShow" :noMoreShow="noMoreShow" :loading="loading"></Loading>
        </div>

          </div>
        </div>
      </div>
      <div class="right-box" v-if="sidebarHide">
        <div class="play-header">
          <div class="header-test">为你推荐视频</div>
        </div>
        <div class="play-list">
          <div class="recommend-play">
            <MoreItem
              v-for="item in moreVideoList"
              :key="item.video_id"
              :data="item"
            ></MoreItem>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import VideoItem from '@/components/wave/videoItem.vue'
import MoreItem from '@/components/video/detailVideo.vue'
import Emo from '@/components/utilView/emoView.vue'
import Reply from '@/components/utilView/replyView.vue'
import TipsView from '@/components/utilView/tipView.vue'
import http from '@/util/http'
import scroll from '@/util/scroll'
import Loading from '@/components/utilView/loadingView.vue'

export default {
  components: {
    VideoItem,
    MoreItem,
    Emo,
    TipsView,
    Reply,
    Loading
  },
  data () {
    return {
      showState: true,
      ArticleCommentText: '',
      videoInfo: {}, // 视频详情内容
      moreVideoList: [], // 推荐相关视频的数据
      isfollow: {}, // 用户和我（观看视频用户）的关注昨天
      isfab: {}, // 是否点赞的变量
      iscollect: {}, // 是否收藏的变量
      // 提示组件的变量
      Tipsicon: 'icon-duigoux',
      Tipstext: '',
      // 评论数据的页码
      page: 1,
      // 评论的数据列表
      commentlist: [],
      sidebarHide: true, // 侧边推荐视频的显示
      screenWidth: document.body.clientWidth, // 窗口当前的可视宽度
      advertise: true, // 广告
      userItem: {
        nid: NaN, // 被回复的评论的用户的id
        username: '', //
        pid: NaN, // 被回复的评论id
        typeid: NaN, // 文章或者视频的id
        type: 'video' // 文章或者视频的类型
      },
      noMore: false, // 判断数据是否还有
      isRequest: false, // 网路请求控制
      loadShow: false, // 显示loading页面
      noMoreShow: false, // 没有更多数据提示
      loading: false, // 加载中提示
      sortState: 'new', // 切换评论状态
      advData: {}

    }
  },
  mounted () {
    console.log('输出的当前评论页码数', this.page)
    window.addEventListener('scroll', this.windowScroll, true) // 监听页面滚动

    // 获取广告数据
    this.getAdv()
    // 获取视频详情数据
    this.getData()
    // 获取评论数据列表
    this.getComment('new')

    console.log('触发刷新')

    // 加载页面数据 获取宽度
    this.getNowWidth()
    // 监听窗口宽度的变化

    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
  watch: {
    // 监听是否有内容输入了评论框，有内容改变样式
    ArticleCommentText (state) {
      if (state !== '') {
        this.$refs.commentButtn.style.background = '#f60'
      } else if (state === '') {
        this.$refs.commentButtn.style.background = 'rgb(255, 158, 93)'
      }
    },

    screenWidth (val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        const that = this
        if (this.screenWidth > 788) {
          this.sidebarHide = true
        } else if (this.screenWidth <= 788) {
          this.sidebarHide = false
        }
        setTimeout(function () {
          // console.log(that.widths)
          // 打印screenWidth变化的值
          console.log(that.screenWidth)
          that.timer = false
        }, 200)
      }
    }
  },

  computed: {
    ...mapState(['user'])
  },

  methods: {

    ...mapMutations(['updateTabbar', 'updateMenu', 'navbarHide', 'menusHide', 'isLogin']),
    // 实现无限加载更多数据
    // 回调函数
    windowScroll () {
      // 获取三个值
      console.log('滚动', this.page)
      const scrollTop = scroll.getScrollTop()
      const clientHeight = scroll.getClientHeight()
      const scrollHeight = scroll.getScrollHeight()
      // console.log(scrollTop, '+', clientHeight, '+ ', scrollHeight)
      // 距离底部10px时触发
      if (scrollTop + clientHeight + 10 > scrollHeight) {
        console.log(this.noMore)

        // 发送异步请求请求数据，同时携带offset并自增offset
        // noMore是自定义变量，如果是最后一批数据则以后都不加载
        if (!this.isRequest) {
          if (!this.noMore) {
            // isRequest限制请求的次数 上一次请求返回之前不会进行下一次请求 ，阻止发送多次请求
            this.isRequest = true
            // 显示加载中
            this.loadShow = true
            this.loading = true
            // 发送请求
            this.getComment(this.sortState)
          }
        }
      }
    },

    // 获取当前屏幕的高度
    async getNowWidth () {
      this.screenWidth = await scroll.getClientWidth()
      if (this.screenWidth > 788) {
        this.sidebarHide = true
      } else if (this.screenWidth < 541) {
        // 隐藏手机端头部菜单menumini
        this.menusHide(false)
        this.sidebarHide = false
        // 显示手机端头部导航栏
        this.navbarHide(true)
        this.isLogin(false)
        this.updateTabbar(true)
      }
    },
    // 重置
    cab () {
      this.page = 1
      this.commentlist = []
    },
    // 获取详情页广告的方法
    getAdv () {
      http.getDetailAdv().then(res => {
        console.log(res.data)
        this.advData = res.data.data
      })
    },
    // 记录广告被点击id
    handerAdvNum (id) {
      console.log('点击了广告', id)
      http.appendAdvNum(id, this.user.uid).then(res => {
        console.log(res.data)
      })
    },
    // 切换评论的排序
    handerState () {
      this.showState = !this.showState
      if (this.showState) {
        this.cab()
        this.sortState = 'new'
        this.getComment(this.sortState)
      } else {
        this.cab()
        this.sortState = 'hot'
        this.getComment('hot')
      }
    },
    // 触发提示组件的方法
    // tipsMethod
    tipsMethod (text, icon = 'icon-duigoux') {
      // text 是提示文本
      // 传递一个时间控制提示组件的显示时间
      this.$refs.childTips.HanderTiming(1200)
      this.Tipstext = text
      this.Tipsicon = icon
    },
    // 获取 视频详情数据
    getData () {
      const { videoId } = this.$route.query
      console.log(videoId)
      // 传递当前查看用户的id 和视频的id
      http.geTvDetail({ uid: this.user.uid, vid: videoId }).then((res) => {
        this.videoInfo = res.data.data.videoData
        this.isfollow = res.data.data.isfollow
        this.isfab = res.data.data.isfab
        this.iscollect = res.data.data.iscollect
        console.log(res.data.data)
      })
      // 获取推荐相关视频的数据
      http.getTvRelevant(videoId).then((res) => {
        console.log(res.data)
        this.moreVideoList = res.data.list
      })
    },
    // 获取评论数据
    getComment (sort) {
      const { videoId } = this.$route.query

      http.getCommentlist(videoId, this.page, sort).then((res) => {
        this.commentlist = [...this.commentlist, ...res.data.commentlist]
        console.log('获取数据', this.commentlist)
        // 隐藏加载更多提示
        this.loadShow = false
        this.loading = false
        this.isRequest = false
        // 判断是否还有足够数据
        if (res.data.commentlist < 20) {
          this.noMore = true
          // 显示没有更多数据
          this.loadShow = true
          this.noMoreShow = true
        }
        this.page++
      })
    },
    // 关注用户
    handelFollow (nid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      http.getfollow(this.user.uid, nid, 1).then((res) => {
        console.log(res.data)
        this.isfollow.state = true
        // 成功提示消息
        this.tipsMethod(res.data.message)
      })
    },
    // 取消关注
    removeFollow (fid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      http.delfollow(fid).then((res) => {
        console.log(res.data)
        this.isfollow.state = false
        // 成功提示消息
        this.tipsMethod(res.data.message)
      })
    },
    // 点赞或者取消点赞处理
    handerFab (vid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      http.getfab(this.user.uid, vid).then((res) => {
        console.log('点赞', res.data)
        // 0是取消点赞成功 1 是点赞
        if (res.data.message.type === 0) {
          this.isfab.fab_state = false
          // 提示消息
          this.tipsMethod(res.data.message.message)
          // 前端数据减1
          this.videoInfo.video_up_num = this.videoInfo.video_up_num - 1
        } else if (res.data.message.type === 1) {
          this.isfab.fab_state = true
          // 提示消息
          this.tipsMethod(res.data.message.message)
          // 前端数据加1
          this.videoInfo.video_up_num = this.videoInfo.video_up_num + 1
        }
      })
    },
    // 复制链接，旧版浏览器的方法
    fallbackCopyTextToClipboard (text) {
      // 1.创建一个可选中元素
      const textArea = document.createElement('textarea')
      textArea.value = text
      // 2.使用定位，阻止页面滚动
      textArea.style.top = '0'
      textArea.style.left = '0'
      textArea.style.position = 'fixed'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      try {
        const successful = document.execCommand('copy')
        const msg = successful ? '复制成功' : '复制失败'

        console.log(msg)
      } catch (err) {
        console.error('Fallback: Oops, unable to copy', err)
      }
      // 3.移除元素
      document.body.removeChild(textArea)
    },
    // 新版复制链接的方法
    copyTextToClipboard (text) {
      if (!navigator.clipboard) {
        this.fallbackCopyTextToClipboard(text)
        return
      }
      navigator.clipboard.writeText(text).then(
        () => {
          console.log(this)
          this.tipsMethod('复制链接成功', 'icon-duigoux')
          console.log('复制链接成功')
        },
        function (err) {
          console.error('Async: Could not copy text: ', err)
        }
      )
    },
    // 复制分享链接
    handerCopy (vid) {
      //
      this.copyTextToClipboard(
        `http://localhost:8080/#/videodetail?videoId=${vid}`
      )
    },
    // 打开表情包弹框
    OpenEmotions () {
      this.$refs.EmotionB.OpenEmotion(true)
    },
    // 表情选中后追加在input 发布 评论
    AppendMessageText (EmotionChinese) {
      this.ArticleCommentText += EmotionChinese
    },

    // 提交评论内容到后端
    subTvComment (vid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // 评论内容
      const content = this.ArticleCommentText
      // 传递发布评论的用户id 视频的id 评论内容
      http.addTvComment({ uid: this.user.uid, vid, content }).then((res) => {
        console.log(res.data)
        if (+res.data.ok === 1) {
          // 发布成功刷新列表
          // 重置页码
          // this.page = 1
          this.cab()
          this.getComment('new')
          // 须知添加评论成功后刷新页码等，但是如果评论前已经刷评论到底部，则需要重新更改控制滚动刷新的控制变量
          // 并且页码等也需重新赋值
          this.noMore = false
          // 显示没有更多数据
          this.loadShow = false
          this.noMoreShow = false

          // 发布成功 提示信息
          this.tipsMethod(res.data.message)
          this.ArticleCommentText = ''
        }
      })
    },
    // 收藏或者取消收藏处理
    handerCollect (vid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      http.getcollect(this.user.uid, vid).then((res) => {
        console.log('收藏', res.data)
        // 0是取消点赞成功 1 是点赞
        if (res.data.message.type === 0) {
          this.iscollect.col_state = false
          // 提示消息
          this.tipsMethod(res.data.message.message)
          // 前端数据减1
          this.videoInfo.video_col_num = this.videoInfo.video_col_num - 1
        } else if (res.data.message.type === 1) {
          this.iscollect.col_state = true
          // 提示消息
          this.tipsMethod(res.data.message.message)
          // 前端数据加1
          this.videoInfo.video_col_num = this.videoInfo.video_col_num + 1
        }
      })
    },

    // 关闭广告
    closead () {
      this.advertise = false
    },
    // 点击回复评论按妞
    showPopUp (uid, username, videoPid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // 传递参数
      this.userItem.nid = uid // 被回复的评论的用户的id
      this.userItem.pid = videoPid //
      this.userItem.username = username //
      this.userItem.typeid = this.videoInfo.video_id //

      this.userItem.index = index /// 被回复的评论的所属视频id
      console.log(uid)
      // 父组件调用子组件的方法，让回复组件显现
      this.$refs.reply.PopUp()
    },
    // 子传父的方法
    handerReply (data) {
      console.log(data)
      const { index } = data
      // 发布后
      // console.log(this.commentlist, '------------------------------')
      this.commentlist[index].replyPage = 1
      this.handerMoreReply(index, true)
    },
    // 展开回复评论
    // 添加第二个参数 控制是否将回复列表评论清空,当发布回复内容成功后就需要重置评论
    handerMoreReply (index, state = false) {
      console.log(index)
      // 获取点击回复评论的评论的id和加载回复评论的页码
      console.log(this.commentlist[index])
      console.log('第二个参数', state)
      // 请求回复数据
      http.getReplyList(this.commentlist[index].replyPage, this.commentlist[index].video_pid, this.user.uid, this.videoInfo.video_id).then(res => {
        if (+res.data.ok === 1) {
          if (state) {
            // 回复评论时重置评论区
            this.commentlist[index].replyList = []
          }
          // 请求成功，赋值回复数据
          this.commentlist[index].replyList = [...this.commentlist[index].replyList, ...res.data.reply_list]
          // 请求成功，回复数据列表加1
          this.commentlist[index].replyPage = this.commentlist[index].replyPage + 1
          // 请求成功，显示回复列表
          this.commentlist[index].replyState = true
        }
        console.log(res.data.reply_list)
      })
    },
    // 点赞视频一级评论 pid是评论id
    handerFabOne (pid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      console.log(pid, this.videoInfo.video_id, this.user.uid)

      http.getVideoCom(this.videoInfo.video_id, pid, this.user.uid).then(res => {
        console.log(res.data)
        if (+res.data.ok === 1 && res.data.message === '点赞成功') {
          this.commentlist[index].one_fab_state = 1
          this.commentlist[index].video_fab_num++
        }
        if (+res.data.ok === 1 && res.data.message === '取消点赞') {
          this.commentlist[index].one_fab_state = null
          this.commentlist[index].video_fab_num--
        }
      })
    },
    // 点赞二级评论
    handerFabTwo (onePid, pid, i, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // 一级评论的id  二级评论的id 二级评论的下标 一级评论的下标
      // console.log(pid, i, index)
      http.getVideoReply(this.videoInfo.video_id, this.user.uid, pid, onePid).then(res => {
        console.log(res.data)
        if (+res.data.ok === 1 && res.data.message === '点赞成功') {
          this.commentlist[index].replyList[i].reply_fab_state = 1
          this.commentlist[index].replyList[i].rep_fab_num++
        }
        if (+res.data.ok === 1 && res.data.message === '取消点赞') {
          this.commentlist[index].replyList[i].reply_fab_state = null
          this.commentlist[index].replyList[i].rep_fab_num--
        }
      })
    }
  },

  // 自定义指令
  directives: {
    focus: {
      mounted (el) {
        el.onfocus = function () {
          el.className = 'input-active comment-box-textarea '
        }
        el.onblur = function () {
          el.className = 'comment-box-textarea'
        }
      }
    }
  },
  unmounted () {
    window.removeEventListener('scroll', this.windowScroll, true)// 销毁滚动事件
    console.log('结束滚动')
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  background: #fff;
  padding-top: 64px;
  .detail {
    width: 85%;
    margin: 0 auto;
    height: auto;
    display: flex;
    background: #fff;

    .left-box {
      width: 75%;
      margin: 0 auto;

      //广告
      .advertise-box {
        width: 100%;
        margin: 20px 0;
        font-size: 14px;
        border: 1px solid #e3e5e7;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .advertise-text-area {
          padding-left: 30px;
          color: #18181c;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .bolder {
            font-weight: bolder;
          }

          .inside-text {
            padding: 5px 0;
            font-size: 14px;
          }
          .ad-tips {
            line-height: 20px;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .link-area {
          flex: 1;

          .inside-bg {
            position: relative;
            img {
              display: block;
              width: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
          }
          .inside-bg::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
              to right,
              #fff,
              transparent 30%
            );
          }
          .gradient {
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            // background: -moz-linear-gradient(right, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 0);
          }
        }
        .ad {
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
          display: flex;
          align-items: center;

          span {
            font-size: 12px;
            color: #333;
            background: #f5f5f5;
            opacity: 0.4;
            padding: 3px;
            text-align: center;
            border-radius: 0 6px 0 6px;
            i {
              font-size: 12px;
              color: #333;
              padding-left: 3px;
            }
          }
        }
      }

      .main-header {
        width: 100%;
        // height: 110px;
        padding: 10px 0;

        .video-title {
          font-size: 20px;
          color: #333;
        }
        .video-information {
          color: #939393;
          font-size: 14px;
          padding-top: 10px;

          span {
            padding-right: 15px;
            i {
              padding-right: 5px;
            }
          }
        }
      }
      .videoitem {
        width: 100%;
        height: 500px;
        background: #939393;
      }
      .row-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #61666d;
        font-size: 18px;
        padding: 10px 5px;
        border-bottom: 1px solid #e3e5e7;
        cursor: pointer;
        .data-text {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          .active-text {
            color: #f60 !important;
          }
        }

        span {
          padding-right: 15px;
          font-size: 14px;
          line-height: 14px;
          &:hover {
            color: #f60;
          }
          i {
            font-size: 20px;
            padding-right: 8px;
          }
        }
      }

      .user-data {
        width: 100%;
        padding: 10px 0;
        .user-data-info {
          display: flex;
          justify-content: space-between;
          width: 100%;
          .user-left {
            width: 70%;
            display: flex;
            justify-content: space-between;
            .user-data-avatar {
              width: 50px;
              height: 50px;
              overflow: hidden;
              border-radius: 50%;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
                display: inline-block;
              }
            }
            .user-data-text {
              width: 100%;
              height: 50px;
              // padding-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .user-text-username {
                color: #333;
                font-size: 14px;
                padding: 4px 0;
                cursor: pointer;
              }
              .user-text-introduce {
                color: #999;
                padding: 4px 0;
                cursor: pointer;
                .user-text-fans {
                  font-size: 14px;
                }
                .user-text-lable {
                  display: inline-block;
                  font-size: 14px;
                }
              }
            }
          }
          .user-right {
            .right-follow {
              font-size: 12px;
              display: block;
              width: 65px;
              height: 28px;

              border-radius: 15px;
              border: 1px solid #f60;
              color: #f60;
              background: #fff;
              margin-top: 10px;
              cursor: pointer;
              &:hover {
                background: rgba($color: #f60, $alpha: 0.3);
                color: white;
              }
            }
            .right-followed {
              font-size: 12px;
              display: block;
              width: 65px;
              height: 28px;

              border-radius: 15px;
              border: 1px solid #000;
              color: #000;
              background: #fff;
              margin-top: 10px;
              cursor: pointer;
              &:hover {
                background: rgba($color: #999, $alpha: 0.3);
              }
            }
          }
        }
      }

      .detail-tab {
        width: 100%;
        margin-top: 30px;
        padding-bottom: 25px;
        .tab-header {
          width: 100%;
          .tab-controlle {
            margin: 20px 0 20px 20px;
            display: flex;
            align-items: center;

            .tab-discuss {
              font-size: 20px;
              color: #333;
              padding-right: 20px;

              .discuss-num {
                color: #939393;
                font-size: 14px;
                padding-left: 10px;
              }
            }
            .discuss-sort {
              color: #939393;
              font-size: 14px;
              cursor: pointer;
              span {
                padding: 0 10px;
                &:hover {
                  color: #f60;
                }
              }
            }
            .herader-active {
              color: #333;
            }
            // span {
            //   font-size: 18px;
            //   color: #666;
            //   // margin: 0 15px;
            //   display: inline-block;
            //   height: 100%;
            //   padding-bottom: 30px;
            //   cursor: pointer;
            // }
          }
        }
        .make-comments {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          margin: 10px 0;

          .comment-user-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 10px;
            border: 1px solid #f5f5f5;

            img {
              display: block;
              width: 100%;
              border-radius: 50%;
              cursor: pointer;

              &:hover {
                filter: brightness(70%);
                opacity: 1;
              }
            }
          }
          .comment-textarea {
            flex: 1;
            height: 50px;
            margin-right: 10px;

            .textarea-box {
              height: 50px;
              form {
                height: 50px;
                display: block;
              }
              .comment-box-textarea {
                width: 100%;
                height: 100%;
                background: #f4f5f7;
                border: 1px solid #e5e9ef;
                border-radius: 5px;
                color: #333;
                line-height: 24px;
                resize: none; //去掉右下角斜杠
                padding: 0 5px;
                font-family: "微软雅黑";

                &:hover {
                  background: #fff;
                  border: 1px solid #f60;
                }
                &:focus {
                  outline: none;
                }
                &::placeholder {
                  color: #c1c1c1;
                }
              }
              .input-active {
                border: rgb(255, 123, 35) 1px solid !important;

                background: #fff;
              }
            }
          }
          .comment-send {
            flex-basis: 80px;
            background: #f60;
            height: 50px;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            line-height: 50px;
            margin: 0 10px;

            &:hover {
              background: #f60;
            }
            .comment-send-text {
              width: 100%;
              height: 100%;

              button {
                width: 100%;
                height: 100%;
                display: inline-block;
                border: none;
                background: rgb(255, 158, 93);
                color: #fff;
                border-radius: 5px;
                font-weight: 600;
                font-size: 14px;
                cursor: pointer;
              }
            }
          }
        }
        .make-comments-emoj {
          width: 100%;
          height: 30px;

          .bt-left {
            margin-left: 60px;
            position: relative;
            .EmotionButton {
              width: 30px;
              height: 30px;
              margin: 5px 0;
              display: inline-block;
              &:hover {
                background: rgba($color: #f60, $alpha: 0.2);
                i {
                  color: #f60;
                }
              }
              border-radius: 50%;
              .IconfontSize {
                cursor: pointer;
                font-size: 24px;
                margin: 3px;
                color: #999;
              }
            }
          }
        }
        .hot-comments {
          width: 100%;

          .root-items {
            width: 95%;
            margin-right: 10px;

            .comment-items {
              width: 100%;
              border-bottom: 1px solid #e7e7e7;
              padding: 10px 0;
              .root-user-comment {
                width: 100%;
                display: flex;
                align-items: center;

                .comment-user-box {
                  width: 80px;

                  .comment-user-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 10px;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                }

                .comment-area-box {
                  width: 100%;
                  margin-top: 20px;

                  .user-info {
                    font-size: 14px;
                    color: #f60;
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;
                    cursor: pointer;
                  }
                  .reply-info {
                    color: #939393;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    margin-top: 4px;

                    .reply-time {
                      margin-right: 10px;
                    }
                    .reply-like {
                      display: flex;
                      align-items: center;
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;

                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-dislike {
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-btn {
                      cursor: pointer;
                      &:hover {
                        color: #f60;
                      }
                    }
                  }

                  .reply-text {
                    margin-left: 20px;
                    color: #333;
                    font-size: 14px;
                    line-height: 24px;
                  }
                  .comment-text {
                    font-size: 12px;
                    line-height: 24px;
                    color: #333;
                    margin-bottom: 4px;

                    .comment-info {
                      color: #939393;
                      font-size: 12px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .comment-time {
                        margin-right: 10px;
                        font-size: 12px;
                      }
                      .comment-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        .like-data {
                          width: 25px;
                          display: inline-block;
                        }
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }

                      .comment-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                  }
                }
              }
            }

            .reply-items {
              width: 100%;

              .reply-user-comment {
                display: flex;
                display: inline-block;
                // align-items: center;
                margin-left: 60px;

                .reply-user-box {
                  //  width: 80px;
                  // padding-left: 65px;

                  .reply-user-img {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 10px;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                }
                .reply-area-box {
                  width: 100%;
                  margin-top: 20px;

                  .user-info {
                    font-size: 12px;
                    color: #f60;
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;
                    cursor: pointer;
                  }
                  .reply-info {
                    color: #939393;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    margin-top: 4px;

                    .reply-time {
                      margin-right: 10px;
                    }
                    .reply-like {
                      display: flex;
                      align-items: center;
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-dislike {
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-btn {
                      cursor: pointer;
                      &:hover {
                        color: #f60;
                      }
                    }
                  }

                  .reply-text {
                    margin-left: 20px;
                    color: #333;
                    font-size: 14px;
                    line-height: 24px;
                  }
                  .comment-text {
                    font-size: 12px;
                    line-height: 24px;
                    color: #333;

                    .comment-info {
                      color: #939393;
                      font-size: 12px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .comment-time {
                        margin-right: 10px;
                        font-size: 12px;
                      }
                      .comment-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          &:hover {
                            color: #f60;
                          }
                        }
                      }

                      .comment-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                  }
                }
              }
            }
            .view-more {
              color: #939393;
              font-size: 12px;
              margin-top: 10px;
              margin-left: 70px;

              .view-more-btn {
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
            }

          }

        }

        .new-comments {
          width: 100%;

          .root-items {
            width: 95%;
            margin-right: 10px;

            .comment-items {
              width: 100%;
              border-bottom: 1px solid #e7e7e7;
              padding: 10px 0;

              .root-user-comment {
                width: 100%;
                display: flex;
                align-items: center;

                .comment-user-box {
                  width: 80px;

                  .comment-user-img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 10px;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                }

                .comment-area-box {
                  width: 100%;
                  margin-top: 20px;

                  .user-info {
                    font-size: 14px;
                    color: #f60;
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;
                    cursor: pointer;
                  }
                  .reply-info {
                    color: #939393;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    margin-top: 4px;

                    .reply-time {
                      margin-right: 10px;
                    }
                    .reply-like {
                      display: flex;
                      align-items: center;
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;

                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-dislike {
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-btn {
                      cursor: pointer;
                      &:hover {
                        color: #f60;
                      }
                    }
                  }

                  .reply-text {
                    margin-left: 20px;
                    color: #333;
                    font-size: 14px;
                    line-height: 24px;
                  }
                  .comment-text {
                    font-size: 12px;
                    line-height: 24px;
                    color: #333;

                    .comment-info {
                      color: #939393;
                      font-size: 12px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .comment-time {
                        margin-right: 10px;
                        font-size: 12px;
                      }
                      .comment-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }

                      .comment-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                  }
                }
              }
            }

            .reply-items {
              width: 100%;

              .reply-user-comment {
                display: flex;
                // align-items: center;
                margin-left: 60px;

                .reply-user-box {
                  //  width: 80px;
                  // padding-left: 65px;

                  .reply-user-img {
                    width: 25px;
                    height: 25px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 10px;
                    border: 1px solid #f5f5f5;

                    img {
                      display: block;
                      width: 100%;
                      border-radius: 50%;

                      &:hover {
                        filter: brightness(90%);
                        opacity: 1;
                      }
                    }
                  }
                }
                .reply-area-box {
                  width: 100%;
                  margin-top: 20px;

                  .user-info {
                    font-size: 14px;
                    color: #f60;
                    display: flex;
                    align-items: center;
                    margin-bottom: 4px;
                    cursor: pointer;
                  }
                  .reply-info {
                    color: #939393;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    margin-top: 4px;

                    .reply-time {
                      margin-right: 10px;
                    }
                    .reply-like {
                      display: flex;
                      align-items: center;
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-dislike {
                      margin-right: 10px;
                      cursor: pointer;
                      i {
                        padding-right: 5px;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                    .reply-btn {
                      cursor: pointer;
                      &:hover {
                        color: #f60;
                      }
                    }
                  }

                  .reply-text {
                    margin-left: 20px;
                    color: #333;
                    font-size: 14px;
                    line-height: 24px;
                  }
                  .comment-text {
                    font-size: 12px;
                    line-height: 24px;
                    color: #333;

                    .comment-info {
                      color: #939393;
                      font-size: 12px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .comment-time {
                        margin-right: 10px;
                        font-size: 12px;
                      }
                      .comment-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          &:hover {
                            color: #f60;
                          }
                        }
                      }

                      .comment-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }
                  }
                }
              }
            }
            .view-more {
              color: #939393;
              font-size: 12px;
              margin-top: 10px;
              margin-left: 70px;

              .view-more-btn {
                cursor: pointer;
                &:hover {
                  color: #f60;
                }
              }
            }

          }
        }

        // 回复评论
        .reply-comment-list{
          width: 95%;
          margin-left: 80px;
          .reply-item{
            width: 100%;
            margin: 15px 0;
            .reply-user-comment{

              .reply-area{
                .comment-text{
                  line-height: 24px;
                  margin-bottom: 4px;
                  .user-name{
                    font-size: 12px;
                    color: #f60;
                    cursor: pointer;
                  }
                  .un-user-nmae{
                    font-size: 12px;
                    span{
                      font-size: 12px;
                      color: #f60;
                    }
                  }
                  .info{
                    font-size: 12px;
                    color: #333;
                  }
                }
                .comment-info{
                  color: #939393;
                  font-size: 12px;
                  display: flex;
                  align-items: center;
                  margin-top: 4px;
                  .time{
                    margin-right: 10px;
                    font-size: 12px;
                  }
                  .like{
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    cursor: pointer;
                    span{
                      margin: 0 15px;
                    }
                  }
                }
              }
            }
          }

        }
        // 查看全部
           .reply-all{
            margin-top: 4px;
            margin-left: 80px;
          width: 95%;

          font-size: 12px;
          color: #9499a0;
          display: flex;
          align-items: center;

          span{
            cursor: pointer;
            margin-right:  15px;
            &:nth-of-type(2){
              color: #1e88e5;
            }
          }
          i{
            color: #9499a0;
            font-size: 12px;
            padding-left: 7px;
          }
        }

      }
      .video-info {
        width: 100%;
        min-height: 30px;
        height: auto;
        line-height: 24px;
        white-space: pre-line; //保留textarea里面的格式
        font-size: 14px;
        color: #333;
        display: block;
        padding: 10px 0;
      }
    }
    .right-box {
      width: 35%;
      // margin: 0 auto;
      margin-left: 20px;
      .play-header {
        width: 100%;
        margin-top: 45px;
        .header-test {
          font-weight: 700;
          font-size: 18px;
        }
      }
      .play-list {
        width: 100%;

        .recommend-play {
          width: 100%;
        }
      }
    }
  }

  @media screen and (min-width: 788px) and (max-width: 1024px) {
    .detail {
      width: 95%;
      margin: 0 auto;
      height: auto;
      display: flex;
      background: #fff;
    }
  }

  @media screen and (min-width: 540px) and (max-width: 788px) {
    .detail {
      width: 95%;
      margin: 0 auto;
      height: auto;
      display: flex;
      background: #fff;
      .left-box {
        width: 95%;
        margin: 0 auto;

        .main-header {
          width: 100%;
          // height: 110px;
          padding: 10px 0;

          .video-title {
            font-size: 20px;
            color: #333;
          }
          .video-information {
            color: #939393;
            font-size: 14px;
            padding-top: 10px;

            span {
              padding-right: 15px;
              i {
                padding-right: 5px;
              }
            }
          }
        }
        .videoitem {
          width: 100%;
          height: 500px;
          background: #939393;
        }
        .row-data {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          color: #61666d;
          font-size: 18px;
          padding: 10px 5px;
          border-bottom: 1px solid #e3e5e7;
          cursor: pointer;
          .data-text {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            .active-text {
              color: #f60 !important;
            }
          }

          span {
            padding-right: 15px;
            font-size: 14px;
            line-height: 14px;
            &:hover {
              color: #f60;
            }
            i {
              font-size: 20px;
              padding-right: 8px;
            }
          }
        }

        .user-data {
          width: 100%;
          padding: 10px 0;
          .user-data-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            .user-left {
              width: 70%;
              display: flex;
              justify-content: space-between;
              .user-data-avatar {
                width: 50px;
                height: 50px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 10px;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                }
              }
              .user-data-text {
                width: 6.87rem;
                height: 50px;
                // padding-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .user-text-username {
                  color: #333;
                  font-size: 14px;
                  padding: 4px 0;
                  cursor: pointer;
                }
                .user-text-introduce {
                  color: #999;
                  padding: 4px 0;
                  cursor: pointer;
                  .user-text-fans {
                    font-size: 14px;
                  }
                  .user-text-lable {
                    display: inline-block;
                    font-size: 14px;
                  }
                }
              }
            }
            .user-right {
              .right-follow {
                font-size: 12px;
                display: block;
                width: 65px;
                height: 28px;

                border-radius: 15px;
                border: 1px solid #f60;
                color: #f60;
                background: #fff;
                margin-top: 10px;
                cursor: pointer;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.3);
                  color: white;
                }
              }
              .right-followed {
                font-size: 12px;
                display: block;
                width: 65px;
                height: 28px;

                border-radius: 15px;
                border: 1px solid #000;
                color: #000;
                background: #fff;
                margin-top: 10px;
                cursor: pointer;
                &:hover {
                  background: rgba($color: #999, $alpha: 0.3);
                }
              }
            }
          }
        }

        .detail-tab {
          width: 100%;
          margin-top: 30px;
          padding-bottom: 25px;
          .tab-header {
            width: 100%;
            .tab-controlle {
              margin: 20px 0 20px 20px;
              display: flex;
              align-items: center;

              .tab-discuss {
                font-size: 20px;
                color: #333;
                padding-right: 20px;

                .discuss-num {
                  color: #939393;
                  font-size: 14px;
                  padding-left: 10px;
                }
              }
              .discuss-sort {
                color: #939393;
                font-size: 14px;
                cursor: pointer;
                span {
                  padding: 0 10px;
                  &:hover {
                    color: #f60;
                  }
                }
              }
              .herader-active {
                color: #333;
              }
              // span {
              //   font-size: 18px;
              //   color: #666;
              //   // margin: 0 15px;
              //   display: inline-block;
              //   height: 100%;
              //   padding-bottom: 30px;
              //   cursor: pointer;
              // }
            }
          }
          .make-comments {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            margin: 10px 0;

            .comment-user-img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;
              margin: 0 10px;
              border: 1px solid #f5f5f5;

              img {
                display: block;
                width: 100%;
                border-radius: 50%;
                cursor: pointer;

                &:hover {
                  filter: brightness(70%);
                  opacity: 1;
                }
              }
            }
            .comment-textarea {
              flex: 1;
              height: 50px;
              margin-right: 10px;

              .textarea-box {
                height: 50px;
                form {
                  height: 50px;
                  display: block;
                }
                .comment-box-textarea {
                  width: 100%;
                  height: 100%;
                  background: #f4f5f7;
                  border: 1px solid #e5e9ef;
                  border-radius: 5px;
                  color: #333;
                  line-height: 24px;
                  resize: none; //去掉右下角斜杠
                  padding: 0 5px;
                  font-family: "微软雅黑";

                  &:hover {
                    background: #fff;
                    border: 1px solid #f60;
                  }
                  &:focus {
                    outline: none;
                  }
                  &::placeholder {
                    color: #c1c1c1;
                  }
                }
                .input-active {
                  border: rgb(255, 123, 35) 1px solid !important;

                  background: #fff;
                }
              }
            }
            .comment-send {
              flex-basis: 80px;
              background: #f60;
              height: 50px;
              border-radius: 5px;
              color: #fff;
              text-align: center;
              line-height: 50px;
              margin: 0 10px;

              &:hover {
                background: #f60;
              }
              .comment-send-text {
                width: 100%;
                height: 100%;

                button {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                  border: none;
                  background: rgb(255, 158, 93);
                  color: #fff;
                  border-radius: 5px;
                  font-weight: 600;
                  font-size: 14px;
                  cursor: pointer;
                }
              }
            }
          }
          .make-comments-emoj {
            width: 100%;
            height: 30px;
            .bt-left {
              margin-left: 60px;
              position: relative;
              .EmotionButton {
                width: 30px;
                height: 30px;
                margin: 5px 0;
                display: inline-block;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.2);
                  i {
                    color: #f60;
                  }
                }
                border-radius: 50%;
                .IconfontSize {
                  cursor: pointer;
                  font-size: 24px;
                  margin: 3px;
                  color: #999;
                }
              }
            }
          }
          .hot-comments {
            width: 100%;

            .root-items {
              width: 95%;
              margin-right: 10px;

              .comment-items {
                width: 100%;
                border-bottom: 1px solid #e7e7e7;
             padding: 10px 0;

                .root-user-comment {
                  width: 100%;
                  display: flex;
                  align-items: center;

                  .comment-user-box {
                    width: 80px;

                    .comment-user-img {
                      width: 40px;
                      height: 40px;
                      border-radius: 50%;
                      overflow: hidden;
                      margin: 0 10px;
                      border: 1px solid #f5f5f5;

                      img {
                        display: block;
                        width: 100%;
                        border-radius: 50%;

                        &:hover {
                          filter: brightness(90%);
                          opacity: 1;
                        }
                      }
                    }
                  }

                  .comment-area-box {
                    width: 100%;
                    margin-top: 20px;

                    .user-info {
                      font-size: 14px;
                      color: #f60;
                      display: flex;
                      align-items: center;
                      margin-bottom: 4px;
                      cursor: pointer;
                    }
                    .reply-info {
                      color: #939393;
                      font-size: 14px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .reply-time {
                        margin-right: 10px;
                      }
                      .reply-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;

                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-dislike {
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }

                    .reply-text {
                      margin-left: 20px;
                      color: #333;
                      font-size: 12px;
                      line-height: 24px;
                    }
                    .comment-text {
                      font-size: 12px;
                      line-height: 24px;
                      color: #333;

                      .comment-info {
                        color: #939393;
                        font-size: 12px;
                        display: flex;
                        align-items: center;
                        margin-top: 4px;

                        .comment-time {
                          margin-right: 10px;
                          font-size: 12px;
                        }
                        .comment-like {
                          display: flex;
                          align-items: center;
                          margin-right: 10px;
                          cursor: pointer;
                          .like-data {
                            width: 25px;
                            display: inline-block;
                          }
                          i {
                            padding-right: 5px;
                            &:hover {
                              color: #f60;
                            }
                          }
                        }

                        .comment-btn {
                          cursor: pointer;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .reply-items {
                width: 100%;

                .reply-user-comment {
                  display: flex;
                  // align-items: center;
                  margin-left: 60px;

                  .reply-user-box {
                    //  width: 80px;
                    // padding-left: 65px;

                    .reply-user-img {
                      width: 25px;
                      height: 25px;
                      border-radius: 50%;
                      overflow: hidden;
                      margin: 0 10px;
                      border: 1px solid #f5f5f5;

                      img {
                        display: block;
                        width: 100%;
                        border-radius: 50%;

                        &:hover {
                          filter: brightness(90%);
                          opacity: 1;
                        }
                      }
                    }
                  }
                  .reply-area-box {
                    width: 100%;
                    margin-top: 20px;

                    .user-info {
                      font-size: 14px;
                      color: #f60;
                      display: flex;
                      align-items: center;
                      margin-bottom: 4px;
                      cursor: pointer;
                    }
                    .reply-info {
                      color: #939393;
                      font-size: 14px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .reply-time {
                        margin-right: 10px;
                      }
                      .reply-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-dislike {
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }

                    .reply-text {
                      margin-left: 20px;
                      color: #333;
                      font-size: 12px;
                      line-height: 24px;
                    }
                    .comment-text {
                      font-size: 12px;
                      line-height: 24px;
                      color: #333;

                      .comment-info {
                        color: #939393;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        margin-top: 4px;

                        .comment-time {
                          margin-right: 10px;
                          font-size: 12px;
                        }
                        .comment-like {
                          display: flex;
                          align-items: center;
                          margin-right: 10px;
                          cursor: pointer;
                          i {
                            &:hover {
                              color: #f60;
                            }
                          }
                        }

                        .comment-btn {
                          font-size: .3rem;
                          cursor: pointer;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .view-more {
                color: #939393;
                font-size: 12px;
                margin-top: 10px;
                margin-left: 70px;

                .view-more-btn {
                  cursor: pointer;
                  &:hover {
                    color: #f60;
                  }
                }
              }

            }

          }
        }
        .video-info {
          width: 100%;

           min-height: 1rem;
        height: auto;
          line-height: .5rem;
          white-space: pre-line; //保留textarea里面的格式
          font-size: .3rem;
          color: #333;
          display: block;
          padding: .2rem 0;
        }
      }
    }
  }
  @media screen and (max-width: 540px) {

  padding-top: 10px;
    .detail {
      width: 100%;
      margin: 0 auto;
      height: auto;
      display: flex;
      background: #fff;
      .left-box {
        width: 95%;
        margin: 0 auto;

          //广告
        .advertise-box {
        width: 100%;
        margin: 20px 0;
        font-size: 14px;
        border: 1px solid #e3e5e7;
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .advertise-text-area {
          padding-left: 30px;
          color: #18181c;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 50%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .bolder {
            font-weight: bolder;
          }

          .inside-text {
            padding: 5px 0;
            font-size: .15rem;
          }
          .ad-tips {
            line-height: 20px;
            font-size: .15rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .link-area {
          flex: 1;

          .inside-bg {
            position: relative;
            img {
              display: block;
              width: 100%;
              object-fit: cover;
              border-radius: 6px;
            }
          }
          .inside-bg::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
              to right,
              #fff,
              transparent 30%
            );
          }
          .gradient {
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            // background: -moz-linear-gradient(right, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 0);
          }
        }
        .ad {
          position: absolute;
          top: 0px;
          right: 0px;
          cursor: pointer;
          display: flex;
          align-items: center;

          span {
            font-size: 12px;
            color: #333;
            background: #f5f5f5;
            opacity: 0.4;
            padding: 3px;
            text-align: center;
            border-radius: 0 6px 0 6px;
            i {
              font-size: 12px;
              color: #333;
              padding-left: 3px;
            }
          }
        }
      }

        .main-header {
          width: 100%;
          // height: 110px;
          padding: .2rem 0;

          .video-title {
            font-size: .41rem;
            line-height: .55rem;
            color: #333;
          }
          .video-information {
            color: #939393;
            font-size: 0.3rem;
            padding-top: .2rem;

            span {
              padding-right: .31rem;
              i {
                padding-right: 5px;
              }
            }
          }
        }
        .videoitem {
          width: 100%;
          height: 500px;
          background: #939393;
        }
        .row-data {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          color: #61666d;
          font-size: 18px;
          padding: 10px 5px;
          border-bottom: 1px solid #e3e5e7;
          cursor: pointer;
          .data-text {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            .active-text {
              color: #f60 !important;
            }
          }

          span {
            padding-right: 15px;
            font-size: .3rem;
            line-height: .3rem;
            &:hover {
              color: #f60;
            }
            i {
              font-size: .41rem;
              padding-right: 8px;
            }
          }
        }

        .user-data {
          width: 100%;
          padding: 10px 0;
          .user-data-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            .user-left {
              width: 7.9rem;
              display: flex;
              justify-content: space-between;
              .user-data-avatar {
                width: 1.03rem;
                height: 1.03rem;
                overflow: hidden;
                margin-right: .1rem;
                border-radius: 50%;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                }
              }
              .user-data-text {
                width: 6.87rem;
                height: 1rem;
                // padding-left: .2rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .user-text-username {
                  color: #333;
                  font-size: 0.34rem;
                  padding: .08rem 0;
                  cursor: pointer;
                }
                .user-text-introduce {
                  color: #999;
                  padding: .08rem 0;
                  cursor: pointer;
                  .user-text-fans {
                    font-size: .3rem;
                  }
                  .user-text-lable {
                    display: inline-block;
                    font-size: .3rem;
                  }
                }
              }
            }
            .user-right {
              .right-follow {
                font-size: .25rem;
                display: block;
                width: 1.35rem;
                height: .58rem;

                border-radius: 15px;
                border: 1px solid #f60;
                color: #f60;
                background: #fff;
                margin-top: .2rem;
                cursor: pointer;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.3);
                  color: white;
                }
              }
              .right-followed {
                font-size: .25rem;
                display: block;
                width: 1.35rem;
                height: .58rem;

                border-radius: 15px;
                border: 1px solid #000;
                color: #000;
                background: #fff;
                margin-top: .2rem;
                cursor: pointer;
                span{
                  font-size: .3rem;
                }
                &:hover {
                  background: rgba($color: #999, $alpha: 0.3);
                }
              }
            }
          }
        }

        .detail-tab {
          width: 100%;
          margin-top: 0.42rem;
          padding-bottom: 25px;
          .tab-header {
            width: 100%;
            .tab-controlle {
              margin: 20px 0 20px 20px;
              display: flex;
              align-items: center;

              .tab-discuss {
                font-size: .41rem;
                color: #333;
                padding-right: .41rem;

                .discuss-num {
                  color: #939393;
                  font-size: .3rem;
                  padding-left: 10px;
                }
              }
              .discuss-sort {
                color: #939393;
                font-size: .3rem;
                cursor: pointer;
                span {
                  padding: 0 10px;
                  &:hover {
                    color: #f60;
                  }
                }
              }
              .herader-active {
                color: #333;
              }
              // span {
              //   font-size: 18px;
              //   color: #666;
              //   // margin: 0 15px;
              //   display: inline-block;
              //   height: 100%;
              //   padding-bottom: 30px;
              //   cursor: pointer;
              // }
            }
          }
          .make-comments {
            width: 100%;
            height: 1rem;
            display: flex;
            align-items: center;
            margin: .2rem 0;

            .comment-user-img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;
              margin: 0 10px;
              border: 1px solid #f5f5f5;

              img {
                display: block;
                width: 100%;
                border-radius: 50%;
                cursor: pointer;

                &:hover {
                  filter: brightness(70%);
                  opacity: 1;
                }
              }
            }
            .comment-textarea {
              flex: 1;
              height: 1rem;
              margin-right: 10px;

              .textarea-box {
                height: 1rem;
                form {
                  height: 1rem;
                  display: block;
                }
                .comment-box-textarea {
                  width: 100%;
                  height: 100%;
                  background: #f4f5f7;
                  border: 1px solid #e5e9ef;
                  border-radius: 5px;
                  color: #333;
                  line-height: 24px;
                  resize: none; //去掉右下角斜杠
                  padding: 0 5px;
                  font-family: "微软雅黑";

                  &:hover {
                    background: #fff;
                    border: 1px solid #f60;
                  }
                  &:focus {
                    outline: none;
                  }
                  &::placeholder {
                    color: #c1c1c1;
                  }
                }
                .input-active {
                  border: rgb(255, 123, 35) 1px solid !important;

                  background: #fff;
                }
              }
            }
            .comment-send {
              flex-basis: 1.25rem;
              background: #f60;
              height: 1rem;
              border-radius: 5px;
              color: #fff;
              text-align: center;
              line-height: 1rem;
              margin: 0 10px;

              &:hover {
                background: #f60;
              }
              .comment-send-text {
                width: 100%;
                height: 100%;

                button {
                  width: 100%;
                  height: 100%;
                  display: inline-block;
                  border: none;
                  background: rgb(255, 158, 93);
                  color: #fff;
                  border-radius: 5px;
                  font-weight: 600;
                  font-size: .3rem;
                  cursor: pointer;
                }
              }
            }
          }
          .make-comments-emoj {
            width: 100%;
            height: .62rem;
            .bt-left {
              margin-left: 60px;
              position: relative;
              .EmotionButton {
                width: .62rem;
                height: .62rem;
                margin: .1rem 0;
                display: inline-block;
                &:hover {
                  background: rgba($color: #f60, $alpha: 0.2);
                  i {
                    color: #f60;
                  }
                }
                border-radius: 50%;
                .IconfontSize {
                  cursor: pointer;
                  font-size: .5rem;
                  margin: 3px;
                  color: #999;
                }
              }
            }
          }
          .hot-comments {
            width: 100%;

            .root-items {
              width: 95%;
              margin-right: 10px;

              .comment-items {
                width: 100%;
                border-bottom: 1px solid #e7e7e7;
              padding: .2rem 0;
                display: flex;
                flex-wrap: wrap;

                .root-user-comment {
                  width: 100%;
                  display: flex;
                  align-items: center;

                  .comment-user-box {
                    width: 1.5rem;

                    .comment-user-img {
                      width: .83rem;
                      height: .83rem;
                      border-radius: 50%;
                      overflow: hidden;
                      margin: 0 10px;
                      border: 1px solid #f5f5f5;

                      img {
                        display: block;
                        width: 100%;
                        border-radius: 50%;

                        &:hover {
                          filter: brightness(90%);
                          opacity: 1;
                        }
                      }
                    }
                  }

                  .comment-area-box {
                    width: 100%;
                    margin-top: 20px;

                    .user-info {
                      font-size: 0.3rem;
                      color: #f60;
                      display: flex;
                      align-items: center;
                      margin-bottom: 4px;
                      cursor: pointer;
                    }
                    .reply-info {
                      color: #939393;
                      font-size: 14px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .reply-time {
                        margin-right: 10px;
                      }
                      .reply-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;

                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-dislike {
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }

                    .reply-text {
                      margin-left: 20px;
                      color: #333;
                      font-size: 12px;
                      line-height: 24px;
                    }
                    .comment-text {
                      font-size: 12px;
                      line-height: 0.3rem;
                      color: #333;
                      .comment-text-info {
                        font-size: 0.25rem;
                      }

                      .comment-info {
                        color: #939393;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        margin-top: 4px;

                        .comment-time {
                          margin-right: 10px;
                          font-size: 12px;
                        }
                        .comment-like {
                          display: flex;
                          align-items: center;
                          margin-right: 10px;
                          cursor: pointer;
                          .like-data {
                            width: 25px;
                            display: inline-block;
                          }
                          i {
                            padding-right: 5px;
                            &:hover {
                              color: #f60;
                            }
                          }
                        }

                        .comment-btn {
                          font-size: .3rem;
                          cursor: pointer;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .reply-items {
                width: 100%;

                .reply-user-comment {
                  display: flex;
                  // align-items: center;
                  margin-left: 60px;

                  .reply-user-box {
                    //  width: 80px;
                    // padding-left: 65px;

                    .reply-user-img {
                      width: 25px;
                      height: 25px;
                      border-radius: 50%;
                      overflow: hidden;
                      margin: 0 10px;
                      border: 1px solid #f5f5f5;

                      img {
                        display: block;
                        width: 100%;
                        border-radius: 50%;

                        &:hover {
                          filter: brightness(90%);
                          opacity: 1;
                        }
                      }
                    }
                  }
                  .reply-area-box {
                    width: 100%;
                    margin-top: 20px;

                    .user-info {
                      font-size: 14px;
                      color: #f60;
                      display: flex;
                      align-items: center;
                      margin-bottom: 4px;
                      cursor: pointer;
                    }
                    .reply-info {
                      color: #939393;
                      font-size: 14px;
                      display: flex;
                      align-items: center;
                      margin-top: 4px;

                      .reply-time {
                        margin-right: 10px;
                      }
                      .reply-like {
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-dislike {
                        margin-right: 10px;
                        cursor: pointer;
                        i {
                          padding-right: 5px;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                      .reply-btn {
                        cursor: pointer;
                        &:hover {
                          color: #f60;
                        }
                      }
                    }

                    .reply-text {
                      margin-left: 20px;
                      color: #333;
                      font-size: 14px;
                      line-height: 24px;
                    }
                    .comment-text {
                      font-size: .2rem;
                      line-height: 0.35rem;
                      color: #333;
                      .comment-text-info {
                        font-size: 0.25rem;
                      }

                      .comment-info {
                        color: #939393;
                        font-size: .3rem;
                        display: flex;
                        align-items: center;
                        margin-top: 4px;

                        .comment-time {
                          font-size: .25rem;
                          margin-right: 10px;

                        }
                        .comment-like {
                          display: flex;
                          align-items: center;
                          margin-right: 10px;
                          cursor: pointer;
                          i {
                            &:hover {
                              color: #f60;
                            }
                          }
                        }

                        .comment-btn {
                          font-size: .3rem;
                          cursor: pointer;
                          &:hover {
                            color: #f60;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .view-more {
                color: #939393;
                font-size: 12px;
                margin-top: 10px;
                margin-left: 70px;

                .view-more-btn {
                  cursor: pointer;
                  &:hover {
                    color: #f60;
                  }
                }
              }

            }
          }
        }

          // 回复评论
        .reply-comment-list{
          width: 95%;
          margin-left: 1.45rem!important;
          .reply-item{
            width: 100%;
            margin: 15px 0;
            .reply-user-comment{

              .reply-area{
                .comment-text{
                  line-height: 24px;
                  margin-bottom: 4px;
                  .user-name{
                    font-size: 12px;
                    color: #f60;
                    cursor: pointer;
                  }
                  .un-user-nmae{
                    font-size: 12px;
                    span{
                      font-size: 12px;
                      color: #f60;
                    }
                  }
                  .info{
                    font-size: 12px;
                    color: #333;
                  }
                }
                .comment-info{
                  color: #939393;
                  font-size: 12px;
                  display: flex;
                  align-items: center;
                  margin-top: 4px;
                  .time{
                    margin-right: 10px;
                    font-size: 12px;
                  }
                  .like{
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    cursor: pointer;
                    span{
                      margin: 0 15px;
                    }
                  }
                }
              }
            }
          }

        }

         // 查看全部
           .reply-all{
            margin-top: 4px;
            margin-left: 1.45rem!important;
          width: 95%;

          font-size: .25rem;
          color: #9499a0;
          display: flex;
          align-items: center;
          span{
            cursor: pointer;
          }

          i{
            color: #9499a0;
            font-size: .25rem;
            padding-left: 7px;
          }
        }
        .video-info {
          width: 100%;
          min-height: 1rem;
          line-height: 0.6rem;
          white-space: pre-line; //保留textarea里面的格式
          // font-size: 16px;
          color: #333;
          display: block;
          padding: .2rem 0;
          .video-info-text {
            font-size: 0.35rem;
          }
        }
      }
    }
  }
}
</style>
